<template>
  <div class="app-container h-flex">
    <div v-loading="listLoading" class="tree-box app-container__left">
      <div class="type-title">菜单</div>
      <el-tree
        ref="tree_box"
        :data="menuTreeData"
        node-key="id"
        icon-class="el-icon-arrow-right"
        :expand-on-click-node="false"
        default-expand-all
        :props="defaultMenuProps"
        @node-click="nodeClick" />
    </div>
    <div ref="tree_box_right" class="h-flex-elastic v-flex overflow-hidden app-container__right">
      <filter-form :form="listQuery" :data="filterData" @search="search" @addForm="addForm" @resizeTable="resizeTable" />
      <div ref="main" class="v-flex-elastic">
        <el-table
          v-if="height>0"
          ref="multipleTable"
          v-loading="listLoading"
          :data="tableData"
          :height="height"
          tooltip-effect="dark">
          <el-table-column
            align="center"
            type="selection"
            width="50" />
          <el-table-column
            label="序号"
            align="center"
            type="index"
            width="50" />
          <el-table-column
            v-if="tableColumnCheckLists[0].ispass"
            prop="categoryName"
            align="center"
            show-overflow-tooltip
            label="流程分类" />
          <el-table-column
            v-if="tableColumnCheckLists[1].ispass"
            prop="key"
            align="center"
            show-overflow-tooltip
            label="流程编码" />
          <el-table-column
            prop="name"
            align="center"
            show-overflow-tooltip
            label="流程名称" />
          <el-table-column
            prop="status"
            align="center"
            show-overflow-tooltip
            label="启动状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status===1">已启动</span>
              <span v-else>未启动</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="duties"
            align="center"
            show-overflow-tooltip
            label="职务" />
          <el-table-column
            prop="school"
            align="center"
            show-overflow-tooltip
            label="流程设计" /> -->
          <el-table-column
            fixed="right"
            align="center"
            width="200"
            class-name="small-padding fixed-width">
            <template #header>
              操作
              <el-dropdown :hide-on-click="false">
                <i class="el-icon-s-operation columnSetIco" />
                <el-dropdown-menu slot="dropdown">
                  <el-checkbox-group v-model="tableColumnCheck">
                    <el-dropdown-item v-for="(item,index) in checkList" :key="index"><el-checkbox :key="item" :label="item" />
                    </el-dropdown-item>
                  </el-checkbox-group>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
            <template slot-scope="{row ,$index}">
              <el-button
                class="el-icon-defined"
                size="mini"
                icon="el-icon-view"
                @click="view(row)" />
              <el-button
                class="el-icon-defined"
                size="mini"
                icon="el-icon-edit"
                @click="updateForm(row,$index)" />
              <el-button
                class="el-icon-defined"
                size="mini"
                icon="el-icon-delete"
                @click="deleteData(row,$index)" />
              <el-button
                size="mini"
                class="td-btn-operation"
                @click="passwordDade(row)">流程设计</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-box">
        <pagination
          :total="total"
          :page.sync="listQuery.page"
          :size.sync="listQuery.size"
          @pagination="getList" />
      </div>
    </div>

    <base-dialog
      class="dictionary-type-dialog"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :loading="dialog.loading"
      :disabled="dialog.disabled"
      @open="beforeOpenDialog"
      @updateData="updateData">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        :disabled="dialog.disabled"
        label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="流程编码" prop="key">
              <el-input v-model="temp.key" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流程名称" prop="name">
              <el-input v-model="temp.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流程分类" prop="category">
              <select-tree
                ref="tree_box1"
                v-model="temp.category"
                style="width:100%;"
                :options="deptTreeData"
                :props="defaultProps" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序号" prop="orderNo">
              <el-input v-model="temp.empName" />
            </el-form-item>
          </el-col>
          <el-col v-if="dialog.title!=='添加'" :span="12">
            <el-form-item label="是否启用" prop="status">
              <el-radio-group v-model="temp.status">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </base-dialog>
    <!-- <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false">
      <div slot="footer" class="dialog-footer">
        <el-button
          v-if="!disabled"
          type="primary"
          @click="dialogStatus==='create'?addData():updateData()">
          保存
        </el-button>
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import { deptList } from '@/api/sysm/stration'
import { getList, saveOrUpdate, deleteById, enable, disable } from '@/api/sysm/stration/design'
import { tableMixin } from '@/utils/public'
export default {
  name: 'DscType',
  mixins: [tableMixin],
  data() {
    return {
      menuTreeData: [], // 菜单树
      defaultMenuProps: {
        children: 'children',
        label: 'label'
      },
      deptTreeData: [],
      defaultProps: {
        parent: 'pId', // 父级唯一标识
        value: 'id', // 唯一标识
        label: 'label', // 标签显示
        children: 'children' // 子级
      },
      height: 0, // table高度
      tableData: [], // 表格数据
      listQuery: {// 搜索条件
        keyName: '',
        page: 1,
        size: 20
      },
      filterData: {
        category: {
          key: 'category',
          type: 'selectTree',
          title: '流程分类',
          options: [],
          props: {
            parent: 'pId', // 父级唯一标识
            value: 'id', // 唯一标识
            label: 'label', // 标签显示
            children: 'children' // 子级
          }
        },
        name: {
          key: 'name',
          type: 'input',
          title: '流程名称',
          placeholder: '请输入流程名称'
        },
        status: {
          key: 'status',
          type: 'status',
          title: '是否启用',
          options: [
            {
              label: 1,
              value: '是'
            },
            {
              label: 0,
              value: '否'
            }
          ]
        }
      },
      platformOptions: [], // 所属平台option
      total: 0,
      textMap: {
        update: '编辑',
        view: '查看',
        create: '添加'
      },
      dialogFormVisible: false, // 弹窗开关
      dialogStatus: '', // 弹窗类型（添加、查看、编辑）
      dialog: {
        visible: false,
        title: '',
        loading: false,
        disabled: false
      },
      temp: {},
      tempForm: {// 弹窗表单
      },
      rowIndex: null,
      rules: {},
      rulesModel: {
        dtName: [{ required: true, message: '必填', trigger: 'blur' },
          { min: 1, message: '大于1个字符', trigger: 'blur' },
          { max: 20, message: '小于20个字符', trigger: 'blur' }],
        dtCode: [{ required: true, message: '必填', trigger: 'blur' },
          { min: 1, message: '大于1个字符', trigger: 'blur' },
          { max: 20, message: '小于20个字符', trigger: 'blur' }],
        dtDec: [{ max: 255, message: '小于255个字符', trigger: 'blur' }]
      },
      listLoading: false,
      disabled: false, // 是否禁止表单操作
      tableColumnCheck: ['流程分类', '流程编码'],
      checkList: ['流程分类', '流程编码'],
      tableColumnCheckLists: [
        { label: '流程分类', prop: 'categoryName', ispass: true },
        { label: '流程编码', prop: 'name', ispass: true }
      ]
    }
  },

  watch: {
    tableColumnCheck(newVal) {
      if (newVal) {
        var arr = this.checkList.filter(i => newVal.indexOf(i) < 0) // 未选中
        this.tableColumnCheckLists.map(i => {
          if (arr.indexOf(i.label) !== -1) {
            i.ispass = false
          } else {
            i.ispass = true
          }
        })
      }
    }
  },
  async created() {
    this.temp = Object.assign({}, this.tempForm)
    await this.getListTree()
    this.getList()
  },
  methods: {
    // 点击tree节点回调
    nodeClick(data) {
      this.listQuery.pid = data.id
      if (data.app) {
        this.listQuery.pid = ''
        this.listQuery.appId = data.id
      } else {
        this.listQuery.pid = data.id
        this.listQuery.appId = ''
      }
      this.search()
    },
    // 查询菜单树
    getListTree() {
      this.listLoading = true
      return deptList({}).then(response => {
        this.menuTreeData.push(response.data)
        this.filterData.category.options = response.data.children
        this.deptTreeData = response.data.children
      }).catch(_ => {
        this.listLoading = false
      })
    },
    // 查询列表
    getList() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
        this.tableData.forEach(item => {
          item.category = parseInt(item.category)
        })
        setTimeout(() => {
          this.listLoading = false
        }, 0 * 1000)
      }).catch(() => {
        this.listLoading = false
      })
    },
    // 搜索
    search() {
      this.listQuery.page = 1
      this.getList()
    },
    // 添加
    addForm() {
      // this.disabled = false
      this.temp = Object.assign({}, this.tempForm)
      // this.dialogStatus = 'create'
      // this.dialogFormVisible = true
      this.rules = Object.assign({}, this.rulesModel)
      this.dialog = Object.assign({}, this.dialog, {
        visible: true,
        title: '添加',
        loading: false,
        disabled: false
      })
    },
    // 添加数据
    // addData() {
    //   this.validate().then(() => {
    //     this.saveOrUpdate(this.temp, 1)
    //   })
    // },
    // 查看
    view(row) {
      // this.disabled = true
      this.temp = Object.assign({}, row) // copy obj
      // this.dialogStatus = 'view'
      this.rules = {}
      // this.dialogFormVisible = true
      this.dialog = Object.assign({}, this.dialog, {
        visible: true,
        title: '查看',
        loading: false,
        disabled: true
      })
    },
    // 编辑
    updateForm(row, $index) {
      // this.disabled = false
      this.rowIndex = $index
      this.temp = Object.assign({}, row) // copy obj
      // this.dialogStatus = 'update'
      this.rules = Object.assign({}, this.rulesModel)
      // this.dialogFormVisible = true
      this.dialog = Object.assign({}, this.dialog, {
        visible: true,
        title: '编辑',
        loading: false,
        disabled: false
      })
    },
    // 编辑数据
    updateData() {
      this.validate().then(() => {
        this.saveOrUpdate(this.temp)
      })
    },
    site(row) {
      this.deptAttr = {
        deptId: row.id,
        deptName: row.deptName,
        deptCode: row.deptCode,
        idPath: row.idPath,
        parentCode: row.parentCode
      }
      this.$refs.site.dialogFormVisible = true
    },
    // type 1 添加，2 编辑
    saveOrUpdate(params, type) {
      const param = Object.assign({}, params)
      saveOrUpdate(param).then(response => {
        // if (this.dialog.title === '添加') {
        //   this.tableData.unshift(response.data)
        //   this.total++
        // } else {
        //   Object.assign(this.tableData[this.rowIndex], response.data)
        // }
        this.getList()
        this.notifiySuccess('保存成功!')
        this.dialog.visible = false
      })
    },
    beforeOpenDialog() {
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 启用、停用,是否系统
    enable(row, $index) {
      this.rowIndex = $index
      this.saveOrUpdate(row, 2)
    },
    // 删除
    deleteData(row, $index) {
      this.confirmBox('确定删除?').then(() => {
        deleteById(row.id).then(response => {
          this.notifiySuccess('删除成功!')
          this.getList()
        })
      }).catch(() => {

      })
    },
    // 流程设计
    passwordDade(row) {
      window.open((process.env.NODE_ENV === 'development' ? 'http://172.26.1.38:83' : '') + '/editor/modeler.html?modelId=' + row.id)
    }
  }
}
</script>
